<template>
	<view class="container" :class="{'landscape': isLandscape}">
		<!-- 学生选择页面 -->
		<view class="student-selection" v-if="showStudentSelection">
			<view class="title-container">
				<text class="title-text">选择参赛学生</text>
				<view class="title-underline"></view>
			</view>

			<view class="ranking-header">
				<text class="ranking-title">学生排名</text>
				<view class="ranking-tabs">
					<button v-for="mode in modes" :key="mode.value" :class="{'active': currentMode === mode.value}"
						@click="changeMode(mode.value)" :style="{borderColor: modeColors[mode.value]}">
						{{ mode.label }}
					</button>
				</view>
			</view>

			<scroll-view class="student-list" scroll-y>
				<view v-for="(student, index) in sortedStudents" :key="student.id" class="student-card"
					:class="{'selected': selectedStudent && selectedStudent.id === student.id}"
					@click="selectStudent(student)">
					<view class="student-rank" :style="{background: getRankColor(index)}">
						<text>{{ index + 1 }}</text>
					</view>

					<view class="student-avatar">
						<image :src="student.avatar" mode="aspectFill"></image>
					</view>

					<view class="student-info">
						<text class="student-name">{{ student.name }}</text>
						<text class="student-class">{{ student.class }}</text>
					</view>

					<view class="student-score">
						<text class="score-value">
							{{ getStudentScore(student.id) || 0 }}
						</text>
						<text class="score-label">最高分</text>
					</view>

					<view class="student-medal" v-if="index < 3">
						<image :src="medalIcons[index]" mode="aspectFit"></image>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 游戏主页面 -->
		<template v-if="!showStudentSelection">
			<!-- 顶部信息栏 -->
			<view class="header" :style="headerStyle">
				<view class="student-display" v-if="selectedStudent">
					<view class="student-avatar small">
						<image :src="selectedStudent.avatar" mode="aspectFill"></image>
					</view>
					<view class="student-meta">
						<text class="student-name">{{ selectedStudent.name }}</text>
						<text class="student-class">{{ selectedStudent.class }}</text>
					</view>
					<button @click="showStudentSelection = true" style="background-color: aqua;">
						<!-- <uni-icons type="redo" size="16" color="#fff"></uni-icons> -->
						切换参赛选手
					</button>
				</view>

				<view class="mode-selector">
					<button v-for="mode in modes" :key="mode.value" :class="{'active': currentMode === mode.value}"
						@click="changeMode(mode.value)" :disabled="gameStarted">
						<text>{{ mode.label }}</text>
						<view class="mode-dot" :style="{background: modeColors[mode.value]}"></view>
					</button>
				</view>

				<view class="main-stats">
					<view class="stat-item">
						<text class="stat-label">时间</text>
						<view class="time-progress">
							<view class="progress-bar"
								:style="{width: `${(timeLeft / 60) * 100}%`, background: timeColor}"></view>
						</view>
						<text class="stat-value">{{ formatTime(timeLeft) }}</text>
					</view>

					<view class="stat-item">
						<text class="stat-label">得分</text>
						<view class="score-display" :style="{color: score >= 0 ? '#2ecc71' : '#e74c3c'}">
							{{ score }}
						</view>
					</view>
				</view>

				<button class="control-btn" @click="gameStarted ? stopGame() : startGame()"
					:style="{background: gameStarted ? '#e74c3c' : '#2ecc71'}">
					{{ gameStarted ? '停止挑战' : '开始挑战' }}
				</button>
			</view>

			<!-- 题目区域 -->
			<view class="question-area" v-if="gameStarted">
				<view class="question-card">
					<view class="question-decor decor-left"></view>
					<view class="question-text">{{ currentQuestion }}</view>
					<view class="question-decor decor-right"></view>
				</view>

				<view class="input-display">
					<text class="input-text">{{ userInput || '?' }}</text>
					<view class="input-underline" :style="{width: `${userInput.length * 15 + 20}px`}"></view>
				</view>
			</view>

			<!-- 键盘区域 -->
			<view class="keyboard-area" v-if="gameStarted">
				<view class="keyboard">
					<view v-for="key in keyboardKeys" :key="key" class="key" @click="handleKeyPress(key)" :class="{
              'number-key': !isNaN(key),
              'operator-key': ['+', '-', '×', '÷'].includes(key),
              'clear-key': key === 'C',
              'submit-key': key === '='
            }" :style="{
              'box-shadow': `0 4px 0 ${getKeyShadowColor(key)}`,
              'transform': activeKey === key ? 'translateY(2px)' : 'translateY(0)',
              'box-shadow': activeKey === key ? 
                `0 2px 0 ${getKeyShadowColor(key)}` : 
                `0 4px 0 ${getKeyShadowColor(key)}`
            }" @touchstart="activeKey = key" @touchend="activeKey = null">
						<text class="key-text">{{ key }}</text>
					</view>
				</view>
			</view>

			<!-- 初始页面 -->
			<view class="welcome-screen" v-if="!gameStarted && !showStudentSelection">
				<view class="welcome-content">
					<view class="title-container">
						<text class="title-text">数学速算挑战</text>
						<view class="title-underline"></view>
					</view>

					<view class="mode-cards">
						<view v-for="mode in modes" :key="mode.value" class="mode-card"
							:class="{'active': currentMode === mode.value}" @click="changeMode(mode.value)"
							:style="{borderColor: modeColors[mode.value]}">
							<view class="mode-icon" :style="{background: modeColors[mode.value]}">
								<uni-icons :type="modeIcons[mode.value]" size="28" color="#fff"></uni-icons>
							</view>
							<text class="mode-name">{{ mode.label }}</text>
							<text class="mode-points">每题 {{ mode.points }} 分</text>
						</view>
					</view>

					<view class="rules">

						<view class="student-name">
							游戏规则
						</view>
						<view class="rule-item">
							<!-- <uni-icons type="checkmark" size="18" color="#2ecc71"></uni-icons> -->
							<text>答对 +4分</text>
						</view>
						<view class="rule-item">
							<!-- <uni-icons type="close" size="18" color="#e74c3c"></uni-icons> -->
							<text>答错 -4分</text>
						</view>
						<view class="rule-item">
							<!-- <uni-icons type="clock" size="18" color="#3498db"></uni-icons> -->
							<text>1分钟限时</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 结果反馈 -->
			<view v-if="showFeedback" class="feedback" :class="feedbackClass">
				<text>{{ feedbackMessage }}</text>
				<text class="feedback-points">
					{{ isCorrect ? '+' : '-' }}{{ currentModeObj.points }}分
				</text>
			</view>

			<!-- 游戏结束弹窗 -->
			<view v-if="gameOver" class="game-over">
				<view class="game-over-content">
					<view class="result-badge" :style="{background: modeColors[currentMode]}">
						<text>{{ currentModeObj.label }}</text>
					</view>

					<text class="result-title">挑战结束!</text>

					<view class="result-stats">
						<view class="result-stat">
							<text class="stat-label">最终得分</text>
							<text class="stat-value" :style="{color: score >= 0 ? '#2ecc71' : '#e74c3c'}">
								{{ score }}
							</text>
						</view>

						<view class="result-stat">
							<text class="stat-label">正确率</text>
							<text class="stat-value">
								{{ totalQuestions > 0 ? Math.round((correctAnswers / totalQuestions) * 100) : 0 }}%
							</text>
						</view>

						<view class="result-stat">
							<text class="stat-label">用时</text>
							<text class="stat-value">{{ formatTime(60 - timeLeft) }}</text>
						</view>
					</view>

					<view class="result-buttons">
						<button class="restart-btn" @click="restartGame">再来一次</button>
						<button class="home-btn" @click="returnHome">返回首页</button>
					</view>
				</view>
			</view>
		</template>

		<!-- 返回按钮 -->
		<button class="back-button" v-if="!showStudentSelection && !gameStarted" @click="showStudentSelection = true">
			<uni-icons type="arrowleft" size="20" color="#fff"></uni-icons>
			<text>返回选择</text>
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				studentScores: {},
				isLandscape: false,
				showStudentSelection: true,
				selectedStudent: null,
				students: [{
						id: 1,
						name: '张三',
						class: '三年二班',
						avatar: '/static/aver1.jpg'
					},
					{
						id: 2,
						name: '李四',
						class: '三年一班',
						avatar: '/static/aver1.jpg'
					},
					{
						id: 3,
						name: '王五',
						class: '三年三班',
						avatar: '/static/aver1.jpg'
					},
					{
						id: 4,
						name: '赵六',
						class: '三年二班',
						avatar: '/static/aver1.jpg'
					},
					{
						id: 5,
						name: '钱七',
						class: '三年一班',
						avatar: '/static/aver1.jpg'
					},
					{
						id: 6,
						name: '孙八',
						class: '三年三班',
						avatar: '/static/aver1.jpg'
					},
				],
				medalIcons: [
					'/static/medals/gold.png',
					'/static/medals/silver.png',
					'/static/medals/bronze.png'
				],
				studentScores: {},
				modes: [{
						label: '简单模式',
						value: 'easy',
						points: 4
					},
					{
						label: '进阶模式',
						value: 'medium',
						points: 5
					},
					{
						label: '终极模式',
						value: 'hard',
						points: 6
					}
				],
				modeColors: {
					easy: '#1abc9c',
					medium: '#3498db',
					hard: '#9b59b6'
				},
				modeIcons: {
					easy: 'medal',
					medium: 'flag',
					hard: 'star'
				},
				currentMode: 'easy',
				currentQuestion: '',
				correctAnswer: 0,
				userInput: '',
				score: 0,
				timeLeft: 60,
				gameTimer: null,
				gameStarted: false,
				gameOver: false,
				showFeedback: false,
				feedbackMessage: '',
				feedbackClass: '',
				isCorrect: false,
				activeKey: null,
				keyboardKeys: [
					'7', '8', '9', '÷',
					'4', '5', '6', '×',
					'1', '2', '3', '-',
					'C', '0', '=', '+'
				],
				correctAnswers: 0,
				totalQuestions: 0
			}
		},
		computed: {
			sortedStudents() {
				return [...this.students].sort((a, b) => {
					const scoreA = this.getStudentScore(a.id) || 0;
					const scoreB = this.getStudentScore(b.id) || 0;
					return scoreB - scoreA;
				});
			},
			currentModeObj() {
				return this.modes.find(m => m.value === this.currentMode);
			},
			headerStyle() {
				return {
					background: `linear-gradient(135deg, ${this.modeColors[this.currentMode]} 0%, #2c3e50 100%)`
				};
			},
			timeColor() {
				if (this.timeLeft > 30) return '#2ecc71';
				if (this.timeLeft > 10) return '#f39c12';
				return '#e74c3c';
			}
		},
		onLoad() {
			this.checkOrientation();
			uni.onWindowResize(() => {
				this.checkOrientation();
			});

			this.loadStudentScores(); // 页面加载时读取成绩
		},
		mounted() {
			this.loadStudentScores();
		},
		onUnload() {
			this.clearTimers();

		},
		methods: {
			checkOrientation() {
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync();
				this.isLandscape = windowWidth > windowHeight;
			},

			selectStudent(student) {
				this.selectedStudent = student;
				this.showStudentSelection = false;
			},

			// 保存学生成绩（简化版）
			saveStudentScore() {
				if (!this.selectedStudent) return;

				const studentId = this.selectedStudent.id;
				const currentScore = this.score;
				const savedScore = this.studentScores[studentId] || 0;

				// 只保存更高的分数
				if (currentScore > savedScore) {
					// 更新本地数据
					this.studentScores[studentId] = currentScore;

					// 存储到本地
					uni.setStorage({
						key: 'studentHighestScores', // 使用新的key区分
						data: this.studentScores,
						success: () => {
							console.log('成绩更新成功', {
								studentId: studentId,
								newScore: currentScore,
								oldScore: savedScore
							});
						}
					});
				}
			},

			// 加载学生成绩（简化版）
			loadStudentScores() {
				uni.getStorage({
					key: 'studentHighestScores',
					success: (res) => {
						this.studentScores = res.data || {};
						console.log('成绩加载完成', this.studentScores);
					},
					fail: () => {
						this.studentScores = {};
					}
				});
			},

			// 获取学生分数
			getStudentScore(studentId) {
				return this.studentScores[studentId] || 0;
			},
			getRankColor(index) {
				const colors = ['#ffd700', '#c0c0c0', '#cd7f32', '#3498db'];
				return colors[Math.min(index, 3)];
			},

			changeMode(mode) {
				this.currentMode = mode;
			},

			startGame() {
				if (!this.selectedStudent) {
					uni.showToast({
						title: '请先选择学生',
						icon: 'none'
					});
					return;
				}

				this.gameStarted = true;
				this.gameOver = false;
				this.score = 0;
				this.timeLeft = 60;
				this.userInput = '';
				this.correctAnswers = 0;
				this.totalQuestions = 0;

				this.gameTimer = setInterval(() => {
					this.timeLeft--;

					if (this.timeLeft <= 0) {
						this.endGame();
					}
				}, 1000);

				this.generateQuestion();
			},

			stopGame() {
				this.endGame();
			},

			endGame() {
				this.clearTimers();
				this.gameStarted = false;
				this.gameOver = true;
				// this.saveStudentScore();
				this.saveStudentScore(); // 保存当前成绩
			},

			clearTimers() {
				if (this.gameTimer) {
					clearInterval(this.gameTimer);
					this.gameTimer = null;
				}
			},

			generateQuestion() {
				let a, b, c, operator, op1, op2, question;

				switch (this.currentMode) {
					case 'easy':
						operator = Math.random() > 0.5 ? '+' : '-';
						a = Math.floor(Math.random() * 50) + 1;
						b = Math.floor(Math.random() * 50) + 1;

						if (operator === '-' && a < b) {
							[a, b] = [b, a];
						}

						question = `${a} ${operator} ${b}`;
						this.correctAnswer = operator === '+' ? a + b : a - b;
						break;

					case 'medium':
						const operators = ['+', '-', '×', '÷'];
						operator = operators[Math.floor(Math.random() * operators.length)];

						if (operator === '+' || operator === '-') {
							a = Math.floor(Math.random() * 100) + 1;
							b = Math.floor(Math.random() * 100) + 1;

							if (operator === '-' && a < b) {
								[a, b] = [b, a];
							}

							question = `${a} ${operator} ${b}`;
							this.correctAnswer = operator === '+' ? a + b : a - b;
						} else if (operator === '×') {
							a = Math.floor(Math.random() * 20) + 1;
							b = Math.floor(Math.random() * 10) + 1;

							while (a * b > 200) {
								a = Math.floor(Math.random() * 20) + 1;
								b = Math.floor(Math.random() * 10) + 1;
							}

							question = `${a} × ${b}`;
							this.correctAnswer = a * b;
						} else {
							b = Math.floor(Math.random() * 10) + 1;
							const multiple = Math.floor(Math.random() * 20) + 1;
							a = b * multiple;

							while (a > 200) {
								b = Math.floor(Math.random() * 10) + 1;
								const multiple = Math.floor(Math.random() * 20) + 1;
								a = b * multiple;
							}

							question = `${a} ÷ ${b}`;
							this.correctAnswer = multiple;
						}
						break;

					case 'hard':
						const hardOperators = ['+', '-', '×'];
						op1 = hardOperators[Math.floor(Math.random() * hardOperators.length)];
						op2 = hardOperators[Math.floor(Math.random() * hardOperators.length)];

						if (Math.random() > 0.5) {
							a = Math.floor(Math.random() * 50) + 1;
							b = Math.floor(Math.random() * 50) + 1;
							c = Math.floor(Math.random() * 9) + 1;

							let part1 = op1 === '+' ? a + b : a - b;
							if (op2 === '+') {
								this.correctAnswer = part1 + c;
							} else if (op2 === '-') {
								this.correctAnswer = part1 - c;
							} else {
								this.correctAnswer = part1 * c;
							}

							question = `(${a} ${op1} ${b}) ${op2} ${c}`;
						} else {
							a = Math.floor(Math.random() * 50) + 1;
							b = Math.floor(Math.random() * 9) + 1;
							c = Math.floor(Math.random() * 9) + 1;

							let part2 = op2 === '+' ? b + c : b - c;
							if (op1 === '+') {
								this.correctAnswer = a + part2;
							} else if (op1 === '-') {
								this.correctAnswer = a - part2;
							} else {
								this.correctAnswer = a * part2;
							}

							question = `${a} ${op1} (${b} ${op2} ${c})`;
						}
						break;
				}

				this.currentQuestion = question;
				this.userInput = '';
				this.totalQuestions++;
			},

			handleKeyPress(key) {
				if (key === 'C') {
					this.userInput = '';
				} else if (key === '=') {
					this.checkAnswer();
				} else {
					if (this.userInput === '?') this.userInput = '';
					this.userInput += key;
				}
			},

			checkAnswer() {
				if (this.userInput === '') return;

				const userAnswer = parseInt(this.userInput);
				this.isCorrect = userAnswer === this.correctAnswer;

				this.showFeedback = true;
				this.feedbackMessage = this.isCorrect ? '正确!' : '错误!';
				this.feedbackClass = this.isCorrect ? 'correct' : 'wrong';

				if (this.isCorrect) {
					this.score += this.currentModeObj.points;
					this.correctAnswers++;
				} else {
					this.score -= this.currentModeObj.points;
				}

				setTimeout(() => {
					this.showFeedback = false;
					this.generateQuestion();
				}, 800);
			},

			restartGame() {
				this.gameOver = false;
				this.score = 0;
				this.timeLeft = 60;
				this.startGame();
			},

			returnHome() {
				this.gameOver = false;
			},

			formatTime(seconds) {
				const mins = Math.floor(seconds / 60);
				const secs = seconds % 60;
				return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
			},

			getKeyShadowColor(key) {
				if (!isNaN(key)) return '#95a5a6';
				if (['+', '-', '×', '÷'].includes(key)) return '#7f8c8d';
				if (key === 'C') return '#c0392b';
				if (key === '=') return '#27ae60';
				return '#95a5a6';
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
	.container {
		min-height: 120vh;
		background-color: #f5f6fa;
		position: relative;
		// overflow: hidden;

		&.landscape {
			.header {
				padding: 15px 30px;
			}

			.question-area {
				margin: 30px auto;

				.question-card {
					padding: 20px 40px;

					.question-text {
						font-size: 42px;
					}
				}
			}

			.keyboard-area {
				padding: 0 50px;

				.keyboard {
					grid-template-columns: repeat(4, 22%);
					grid-gap: 20px;

					.key {
						height: 80px;
						font-size: 28px;
					}
				}
			}
		}
	}

	.student-display {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.15);
		padding: 8px 15px;
		border-radius: 25px;
		margin: 10px 0 15px;
		backdrop-filter: blur(5px);
		border: 1px solid rgba(255, 255, 255, 0.2);
		box-shadow:
			0 4px 6px rgba(0, 0, 0, 0.1),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			background: rgba(255, 255, 255, 0.25);
		}

		.student-avatar {
			width: 42px;
			height: 42px;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 12px;
			border: 2px solid rgba(255, 255, 255, 0.3);
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.student-meta {
			flex: 1;
			margin-right: 12px;

			.student-name {
				font-size: 15px;
				font-weight: 600;
				color: white;
				display: block;
				margin-bottom: 2px;
				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
				letter-spacing: 0.3px;
			}

			.student-class {
				font-size: 11px;
				color: rgba(255, 255, 255, 0.85);
				display: block;
				font-weight: 500;
				text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
			}
		}

		.change-student {
			background: rgba(255, 255, 255, 0.2);
			width: 34px;
			height: 34px;
			border-radius: 50%;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.2s;
			border: 1px solid rgba(255, 255, 255, 0.15);

			&:active {
				background: rgba(255, 255, 255, 0.3);
				transform: scale(0.95);
			}

			.uni-icons {
				filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
			}
		}
	}

	.rules {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 16px;
		padding: 20px;
		margin-top: 20px;
		box-shadow:
			0 8px 20px rgba(0, 0, 0, 0.08),
			inset 0 1px 0 rgba(255, 255, 255, 0.2);
		border: 1px solid rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(5px);

		.rule-item {
			display: flex;
			align-items: center;
			padding: 12px 15px;
			margin-bottom: 10px;
			border-radius: 10px;
			background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&:last-child {
				margin-bottom: 0;
			}

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 4px;
				background: var(--rule-color);
			}

			.uni-icons {
				margin-right: 12px;
				font-size: 20px;
				min-width: 24px;
				text-align: center;
				filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
			}

			text {
				font-size: 16px;
				font-weight: 500;
				color: #333;
				flex: 1;
				letter-spacing: 0.3px;
			}

			/* 为每条规则添加不同的颜色 */
			&:nth-child(1) {
				--rule-color: #2ecc71;

				.uni-icons {
					color: #2ecc71;
				}
			}

			&:nth-child(2) {
				--rule-color: #e74c3c;

				.uni-icons {
					color: #e74c3c;
				}
			}

			&:nth-child(3) {
				--rule-color: #3498db;

				.uni-icons {
					color: #3498db;
				}
			}

			/* 悬停效果 */
			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

				&::before {
					width: 6px;
				}
			}
		}
	}

	.ranking-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		padding: 15px;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(246, 248, 249, 0.9) 100%);
		border-radius: 12px;
		box-shadow:
			0 6px 12px rgba(0, 0, 0, 0.05),
			inset 0 1px 0 rgba(255, 255, 255, 0.8);
		border: 1px solid rgba(255, 255, 255, 0.3);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(45deg,
					rgba(52, 152, 219, 0.05) 0%,
					rgba(26, 188, 156, 0.05) 50%,
					rgba(155, 89, 182, 0.05) 100%);
			z-index: -1;
		}

		.ranking-title {
			font-size: 20px;
			font-weight: 700;
			color: #2c3e50;
			position: relative;
			padding-left: 28px;
			letter-spacing: 0.5px;
			text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 20px;
				height: 20px;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232c3e50"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2z"/></svg>');
				background-size: contain;
				opacity: 0.7;
			}
		}

		.ranking-tabs {
			display: flex;
			background: rgba(255, 255, 255, 0.7);
			border-radius: 30px;
			padding: 4px;
			box-shadow:
				inset 0 1px 3px rgba(0, 0, 0, 0.1),
				0 2px 4px rgba(0, 0, 0, 0.05);

			button {
				padding: 6px 14px;
				font-size: 13px;
				font-weight: 600;
				border-radius: 20px;
				margin: 0 2px;
				background: transparent;
				border: none;
				color: #7f8c8d;
				transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
				position: relative;
				z-index: 1;
				letter-spacing: 0.3px;

				&.active {
					color: white;
					// background: linear-gradient(135deg, var(--mode-color) 0%, darken(var(--mode-color), 10%) 100%);
					background: rgba(231, 76, 60, 0.95);
					box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
					transform: translateY(-1px);
				}

				&:not(.active):hover {
					color: #2c3e50;
					background: rgba(0, 0, 0, 0.03);
				}

				&::after {
					content: '';
					position: absolute;
					bottom: -4px;
					left: 50%;
					transform: translateX(-50%);
					width: 0;
					height: 2px;
					background: #f766ad;
					// background: var(--mode-color);
					transition: width 0.3s;
				}

				&.active::after {
					width: calc(100% - 20px);
				}
			}
		}
	}

	/* 学生选择页面 */
	.student-selection {
		padding: 20px;
		// height: 100vh;
		// background: linear-gradient(to bottom, #f5f6fa, #dfe6e9);

		.title-container {
			text-align: center;
			margin-bottom: 20px;

			.title-text {
				font-size: 28px;
				font-weight: bold;
				color: #2d3436;
			}

			.title-underline {
				width: 80px;
				height: 4px;
				background: #3498db;
				margin: 8px auto 0;
				border-radius: 2px;
			}
		}

		.ranking-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.ranking-title {
				font-size: 20px;
				font-weight: bold;
				color: #2d3436;
			}

			.ranking-tabs {
				display: flex;

				button {
					padding: 6px 12px;
					font-size: 12px;
					border-radius: 15px;
					margin-left: 8px;
					background: white;
					border: 1px solid #ddd;
					color: #7f8c8d;

					&.active {
						color: white;
						border-width: 0;
						background: dodgerblue;
					}
				}
			}
		}

		.student-list {
			height: calc(100vh - 150px);

			.student-card {
				background: white;
				border-radius: 12px;
				padding: 15px;
				margin-bottom: 15px;
				display: flex;
				align-items: center;
				position: relative;
				box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
				transition: all 0.3s;

				&.selected {
					border: 2px solid #3498db;
					transform: translateY(-2px);
					box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
				}

				.student-rank {
					width: 30px;
					height: 30px;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 15px;
					color: white;
					font-weight: bold;
				}

				.student-avatar {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 15px;
					border: 2px solid #ecf0f1;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}

					&.small {
						width: 40px;
						height: 40px;
						margin-right: 10px;
						border-radius: 20rpx;
					}
				}

				.student-info {
					flex: 1;

					.student-name {
						font-size: 16px;
						font-weight: bold;
						color: #2d3436;
						display: block;
						margin-bottom: 3px;
					}

					.student-class {
						font-size: 12px;
						color: #7f8c8d;
					}
				}

				.student-score {
					text-align: center;
					margin-right: 15px;

					.score-value {
						font-size: 18px;
						font-weight: bold;
						color: #2d3436;
						display: block;
					}

					.score-label {
						font-size: 10px;
						color: #7f8c8d;
					}
				}

				.student-medal {
					width: 30px;
					height: 30px;
					position: absolute;
					top: -8px;
					right: -8px;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	/* 顶部信息栏 */
	.header {
		background: linear-gradient(135deg, #1abc9c 0%, #2c3e50 100%);
		padding: 15px 20px;
		color: white;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;

		.student-display {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.2);
			padding: 8px 12px;
			border-radius: 20px;
			margin-bottom: 15px;

			.student-meta {
				margin-right: 10px;

				.student-name {
					font-size: 14px;
					font-weight: bold;
					color: white;
					display: block;
				}

				.student-class {
					font-size: 10px;
					color: rgba(255, 255, 255, 0.8);
				}
			}

			.change-student {
				background: rgba(255, 255, 255, 0.3);
				width: 30px;
				height: 30px;
				border-radius: 50%;
				padding: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.mode-selector {
			display: flex;
			justify-content: space-around;
			margin-bottom: 15px;

			button {
				background: rgba(255, 255, 255, 0.1);
				color: white;
				border: none;
				border-radius: 30px;
				padding: 8px 15px;
				font-size: 14px;
				display: flex;
				align-items: center;
				transition: all 0.3s;

				&.active {
					background: rgba(255, 255, 255, 0.3);
					font-weight: bold;
				}

				&:disabled {
					opacity: 0.7;
				}

				.mode-dot {
					width: 8px;
					height: 8px;
					border-radius: 50%;
					margin-left: 8px;
				}
			}
		}

		.main-stats {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				// width: 200rpx;
				width: 100%;

				.stat-label {
					font-size: 12px;
					opacity: 0.8;
					margin-bottom: 5px;
				}

				.time-progress {
					// width: 200rpx;
					width: 100%;
					height: 6px;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 3px;
					overflow: hidden;

					.progress-bar {
						height: 100%;
						border-radius: 3px;
						transition: width 1s linear;
					}
				}

				.stat-value {
					font-size: 16px;
					font-weight: bold;
					margin-top: 5px;
				}

				.score-display {
					font-size: 24px;
					font-weight: bold;
				}
			}
		}

		.control-btn {
			background: #2ecc71;
			color: white;
			border: none;
			border-radius: 30px;
			padding: 10px 0;
			font-weight: bold;
			width: 100%;
			box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
			transition: all 0.2s;

			&:active {
				transform: translateY(2px);
				box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
			}
		}
	}

	/* 题目区域 */
	.question-area {
		margin: 20px auto;
		padding: 0 20px;

		.question-card {
			background: white;
			border-radius: 16px;
			padding: 15px 30px;
			margin-bottom: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			position: relative;
			overflow: hidden;

			.question-decor {
				position: absolute;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				opacity: 0.1;

				&.decor-left {
					background: #3498db;
					left: -10px;
					top: -10px;
				}

				&.decor-right {
					background: #e74c3c;
					right: -10px;
					bottom: -10px;
				}
			}

			.question-text {
				font-size: 36px;
				font-weight: bold;
				color: #2d3436;
				text-align: center;
			}
		}

		.input-display {
			text-align: center;
			margin-top: 20px;

			.input-text {
				font-size: 32px;
				font-weight: bold;
				color: #2d3436;
				letter-spacing: 2px;
			}

			.input-underline {
				height: 3px;
				background: #3498db;
				margin: 5px auto 0;
				transition: width 0.3s;
			}
		}
	}

	/* 键盘区域 */
	.keyboard-area {
		padding: 0 20px;
		margin-top: 20px;

		.keyboard {
			display: grid;
			grid-template-columns: repeat(4, 23%);
			grid-gap: 15px;
			justify-content: center;

			.key {
				background: white;
				border-radius: 12px;
				height: 70px;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: all 0.1s;
				user-select: none;

				.key-text {
					font-size: 24px;
					font-weight: bold;
				}

				&.number-key {
					background: #ecf0f1;
					color: #2d3436;
				}

				&.operator-key {
					background: #3498db;
					color: white;
				}

				&.clear-key {
					background: #e74c3c;
					color: white;
				}

				&.submit-key {
					background: #2ecc71;
					color: white;
				}

				&:active {
					transform: translateY(2px);
				}
			}
		}
	}

	/* 初始页面 */
	.welcome-screen {
		// position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #f5f6fa;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
		z-index: 5;

		.welcome-content {
			width: 100%;
			// max-width: 500px;

			.title-container {
				text-align: center;
				margin-bottom: 30px;

				.title-text {
					font-size: 28px;
					font-weight: bold;
					color: #2d3436;
					position: relative;
					display: inline-block;
				}

				.title-underline {
					width: 60px;
					height: 4px;
					background: #3498db;
					margin: 10px auto 0;
					border-radius: 2px;
				}
			}

			.mode-cards {
				display: flex;
				flex-direction: column;
				gap: 15px;
				margin-bottom: 30px;

				.mode-card {
					background: white;
					border-radius: 12px;
					padding: 15px;
					display: flex;
					align-items: center;
					border-left: 5px solid;
					box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
					transition: all 0.3s;

					&.active {
						transform: translateY(-5px);
						box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
					}

					.mode-icon {
						width: 50px;
						height: 50px;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 15px;
					}

					.mode-name {
						font-size: 18px;
						font-weight: bold;
						color: #2d3436;
						flex: 1;
					}

					.mode-points {
						font-size: 14px;
						color: #7f8c8d;
					}
				}
			}

			.rules {
				background: white;
				border-radius: 12px;
				padding: 15px;
				box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);

				.rule-item {
					display: flex;
					align-items: center;
					margin-bottom: 10px;

					&:last-child {
						margin-bottom: 0;
					}

					text {
						margin-left: 10px;
						font-size: 16px;
					}
				}
			}
		}
	}

	/* 结果反馈 */
	.feedback {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 15px 30px;
		border-radius: 10px;
		font-size: 24px;
		font-weight: bold;
		color: white;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		animation: feedbackIn 0.3s;

		&.correct {
			background: rgba(46, 213, 115, 0.95);
		}

		&.wrong {
			background: rgba(231, 76, 60, 0.95);
		}

		.feedback-points {
			font-size: 16px;
			margin-top: 5px;
			opacity: 0.9;
		}
	}

	/* 游戏结束弹窗 */
	.game-over {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 200;

		&-content {
			background: white;
			padding: 30px;
			border-radius: 16px;
			width: 85%;
			max-width: 400px;
			text-align: center;
			animation: popIn 0.3s;

			.result-badge {
				background: #3498db;
				color: white;
				padding: 5px 15px;
				border-radius: 20px;
				font-size: 14px;
				font-weight: bold;
				display: inline-block;
				margin-bottom: 15px;
			}

			.result-title {
				font-size: 24px;
				font-weight: bold;
				color: #2d3436;
				display: block;
				margin-bottom: 20px;
			}

			.result-stats {
				display: flex;
				justify-content: space-around;
				margin-bottom: 25px;

				.result-stat {
					.stat-label {
						font-size: 14px;
						color: #7f8c8d;
						display: block;
						margin-bottom: 5px;
					}

					.stat-value {
						font-size: 20px;
						font-weight: bold;
						color: #2d3436;
					}
				}
			}

			.result-buttons {
				display: flex;
				flex-direction: column;
				gap: 10px;

				button {
					border: none;
					border-radius: 30px;
					padding: 12px;
					font-weight: bold;
					transition: all 0.2s;

					&:active {
						transform: scale(0.98);
					}
				}

				.restart-btn {
					background: #3498db;
					color: white;
				}

				.home-btn {
					background: #ecf0f1;
					color: #7f8c8d;
				}
			}
		}
	}

	/* 返回按钮 */
	.back-button {
		position: fixed;
		bottom: 20px;
		left: 20px;
		background: rgba(0, 0, 0, 0.5);
		color: white;
		border-radius: 20px;
		padding: 8px 15px;
		display: flex;
		align-items: center;
		z-index: 100;

		text {
			margin-left: 5px;
			font-size: 14px;
		}
	}

	/* 动画 */
	@keyframes feedbackIn {
		from {
			opacity: 0;
			transform: translate(-50%, -40%);
		}

		to {
			opacity: 1;
			transform: translate(-50%, -50%);
		}
	}

	@keyframes popIn {
		from {
			opacity: 0;
			transform: scale(0.9);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>